<template>
  <div class="top">
    <div class="setUp">
      <!-- 我的设置 -->
      <img
        @click="goMysettings"
        class="icon iconLeft"
        src="../../../components/My/image/wode_icon_shezhi.png"
        alt=""
      />
      <!-- 我的消息 -->
      <img
        @click="goMymessage"
        class="icon iconRight"
        src="../../../components/My/image/wode_icon_xiaoxi.png"
        alt=""
      />
    </div>
    <div class="lanDing">
      <div class="lanDingbox">
        <div class="yuan"><img :src="img" alt=""></div>
      </div>
      <div  class="loginTips" @click="dl">
        {{name}}
      </div>
      <!-- <input type="text" v-model="name" name="" id=""> -->
      <div class="xg" v-show="isshow">
        <input type="text" v-model="name" name="" id="">
        <button @click="bc">确定</button>
      </div>
      <button class="modify" @click="modify">修改昵称</button>
      <div class="individual" @click="indivIdual">个人主页</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data(){
    return{
      isshow:false,
      img:'https://img0.baidu.com/it/u=901653132,1486498341&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659286800&t=35236236255a08e3cd944dd507375576',
      name:'默认姓名'
    }
  },
  created(){
    // console.log(111);
    let token = JSON.parse(localStorage.getItem("token"))
    let namea = JSON.parse(localStorage.getItem("name"))
   
    // console.log(token);
    if(token==4){
      this.img="https://img2.woyaogexing.com/2019/08/17/eea8788d488c45df99bc0a535ee9ba58!400x400.webp",
      this.name="马帅斌"
    }else if(token == 5){
      this.img="https://img2.woyaogexing.com/2019/08/17/58d9711e66614ed4b799575976b7846d!400x400.webp",
      this.name="赵萍萍"
    }
    else if(token == 6){
      this.img="https://img2.baidu.com/it/u=4108970874,635177821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="曾帅蒙"
    }
    else if(token == 7){
      this.img="https://img0.baidu.com/it/u=3028524711,2620435681&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="肖争光"
    }
    else if(token == 8){
      this.img="https://img2.baidu.com/it/u=606094927,3799272326&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300",
      this.name="张航"
    }
    else if(token == 9){
      this.img="https://img1.baidu.com/it/u=3251096387,773849901&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }
    else if(token == 10){
      this.img="https://img0.baidu.com/it/u=3131883709,3842304763&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=499",
      this.name="赵明芳"
    }else if(token == 11){
      this.img="https://img0.baidu.com/it/u=670642720,857085021&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
      this.name="赵明芳"
    }else if(token == 12){
      this.img="https://img0.baidu.com/it/u=3614890323,3265800961&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }else if(token == 13){
      this.img="https://img2.baidu.com/it/u=2887112838,339607663&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }else if(token == 14){
      this.img="https://img1.baidu.com/it/u=1362686201,3869405057&fm=253&fmt=auto&app=138&f=JPG?w=494&h=500",
      this.name="赵明芳"
    }else if(token == 15){
      this.img="https://img1.baidu.com/it/u=3062529862,2867186643&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }else if(token == 16){
      this.img="https://img0.baidu.com/it/u=3172690607,572219001&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }else if(token == 17){
      this.img="https://img0.baidu.com/it/u=47486394,1047660900&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }else if(token == 18){
      this.img="https://img0.baidu.com/it/u=3720086244,2886805859&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      this.name="赵明芳"
    }else if(token == 19){
      this.img="https://img0.baidu.com/it/u=2104733379,1271446679&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
      this.name="赵明芳"
    }
    //  console.log(namea);
    if(namea!=null){
      this.name = namea
    }
  },
  methods: {
    // 保存昵称
    bc(){
      localStorage.setItem("name",JSON.stringify(this.name))
      this.isshow=false
    },
    dl(){
      let data = JSON.parse(localStorage.getItem("token"))
      if(!data){
        this.$router.push({name:"login"})
      }else{
        Toast("已经登录过了哦")
      }
    },
    indivIdual() {
      //跳转个人主页
      this.$router.push({ path: "/personal" });
    },
    /* 我的消息跳转 */
    goMymessage() {
      this.$router.push({ path: "/Mymessage" });
    },
    goMysettings() {
      this.$router.push({ path: "/mysettings" });
    },
    // 修改昵称
    modify(){
      console.log(111);
      this.isshow=true
    }
  },
};
</script>

<style lang="scss" scoped>
.xg{
  input{
    width: 200px;
  }
}
.top {
  width: 750px;
  height: 400px;
  background: #bbd2f4;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  padding-top: 113px;
}
.setUp {
  width: 750px;
  height: 40px;
  margin-bottom: 34px;
}
.icon {
  display: block;
  width: 40px;
  height: 40px;
}
.iconRight {
  float: right;
  margin-right: 32px;
}
.iconLeft {
  float: right;
  margin-right: 24px;
}
.lanDing {
  width: 100%;
  height: 126px;
  line-height: 126px;
  position: relative;
}
.lanDingbox {
  width: 126px;
  height: 126px;
  margin-left: 20px;
  float: left;
}
.yuan {
  width: 126px;
  height: 126px;
  border-radius: 62px 62px 62px 62px;
  background: #ededed;
  img{
    width: 100%;
  border-radius: 62px 62px 62px 62px;
  }
}
.loginTips {
  float: left;
  height: 126px;

  font-size: 30px;
  margin-left: 28px;
  color: #ffffff;
}
.individual {
  text-align: center;
  width: 102px;
  height: 42px;
  background: #8cb5f0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  line-height: 42px;
  border-radius: 21px 0px 0px 21px;
  font-size: 20px;
  color: #ffffff;
}
.modify{
  background: none;
  // height: 40px;
  border-radius: 21px;
  border: 1px solid #eee;
  font-size: 20px;
  color: #fff;
  // margin-left: 30px;
}
</style>
